<template>
	<view>
		<view class="list-content animated flipInX" v-for="(item,index) in orderlist" :key="index"
			:style=" 'animation-delay:' +(index - (0.9999* index)) +'s !important;'" @click="sheeShowClick(item.order_id)">
			<view class="dateils-top">
				<view class="" style="font-weight: 550;">单号 : {{item.trade_no}}</view>
				<view>
					<!-- <u-tag :text="item.status_str" shape="circle" :type="staColor(item.status_str)" /> -->
					<view class="">{{item.link_name}}</view>
				</view>
			</view>
			<view class="dateils-content">
				<view>{{item.body}}</view>
				<view>*{{item.quantity}}</view>
			</view>
			<view class="dateils-content " style="border: none;">
				<view>创建时间 : {{item.create_time}}</view>
			</view>
			<view class="dateils-bottom">
				<view class="dateils-money">订单金额 : ￥{{item.fee}}</view>
				<view class="dateils-time">佣 金 : {{item.rebate_amount}}</view>
			</view>
		</view>
		
		
		<u-loadmore :status="status" bg-color="#f3f4f6" v-if="!orderlist" />
		<view class="empty" v-if="emptyShow">
			<u-empty text="暂无订单" mode="list" :show="emptyShow"></u-empty>
		</view>
		<u-toast ref="uToast" />
		<view class="inform-body"></view>
		<authDialog :isAuthShow="isAuthShow" @authConfirm="authConfirm"></authDialog>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				sheeShow: false,
				orderlist: [],
				emptyShow: false,
				isAuthShow: false,
				page: 1,
				status: "loadmore",
				limit: 10,
				total_page: 1,
				refundId: '',
			};
		},
		onLoad() {


		},
		onShow() {
			this.isAuthShow = false
			if (this.$u.test.isEmpty(this.vuex_token)) {
				this.isAuthShow = true
			}
			this.orderlist = []
			this.page = 1
			this.getorderList()
		},
		methods: {
			// 授权
			authConfirm() {
				this.getorderList()
				this.isAuthShow = false;
			},
			sheeShowClick(ev) {
			console.log("详情")
				this.refundId = ev
				this.$u.route({
					url: 'pages/order/order_dateils?id=' + this.refundId,
				});
			},
			// 下拉菜单
			staColor(col) {
				switch (col) {
					case '支付成功':
						return 'success';
					case '待支付':
						return 'warning';
					case '未支付':
						return 'info';
					case '支付失败':
						return 'error';
					case '已出票':
						return 'success';
					case '订单超时':
						return 'primary';
					case '订单过期':
						return 'primary';
					case '退款申请中':
						return 'warning';
					case '退款驳回':
						return 'info';
					case '退款成功':
						return 'primary';
					case '退款失败':
						return 'error';
					default:
						break;
				}
			},
			getorderList(e) {
				let that = this
				let postData = {
					'page': that.page,
					'limit': 10
				};
				that.$u.post('/api/user/orders', postData).then(res => {
					that.total_page = res.total_page
					let len = res.list.length
					if (res.length == 0) {
						this.emptyShow = true
					} else {
						this.emptyShow = false
					}
					for (let i = 0; i < len; i++) {
						that.orderlist.push(res.list[i])
					}
					if (res.total_page > 1) {
						that.status = 'loadmore';
					} else {
						that.status = 'nomore';
					}
				});
			},
		},
		onReachBottom() {
			let that = this;
			that.status = 'loading';
			that.page++;
			if (that.page > that.total_page) {
				that.status = 'nomore';
			} else {
				that.status = 'loading';
				that.getorderList();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.list-content {
		margin-bottom: 10rpx;

		.dateils-top {
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 15rpx 30rpx;
			border-bottom: 1rpx solid #ebebeb;
		}

		.dateils-content {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			background-color: #FFFFFF;

			view {
				padding: 10rpx 0rpx;
			}
		}

		.dateils-bottom {
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 10rpx 30rpx;
			border-top: 1rpx solid #ebebeb;

			.dateils-money {
				font-size: 25rpx;
			}

			.dateils-time {
				font-size: 25rpx;
			}
		}
	}

	.empty {
		display: flex;
		justify-content: center;
		width: 100%;
		left: 0;
		bottom: 0;
		right: 0;
		position: fixed;
		top: 0;
	}

	.form-input {
		padding: 50rpx;
	}
</style>
